{/* Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

---
category: Introduction
---

# Getting Started

This page describes how to get started building an application with React Spectrum.

## What is React Spectrum?

**React Spectrum** is a React implementation of [Spectrum](https://spectrum.adobe.com/), Adobe's design system.
It provides components that are adaptive to interactions and screen sizes across devices, and includes full
screen reader and keyboard navigation support for accessibility.

## Installation

You can install React Spectrum package using a package manager like [npm](https://docs.npmjs.com/cli/npm) or
[yarn](https://classic.yarnpkg.com/lang/en/).

```
yarn add @adobe/react-spectrum
```

If you prefer, you can also install components from individually versioned packages. See the [versioning](versioning.html)
docs for more details.

## Build tooling

React Spectrum works with most popular build tooling, like [Parcel](https://parceljs.org) and
[create-react-app](https://create-react-app.dev), or lower level tools like [webpack](https://webpack.js.org/).

The only requirement is CSS importing support. This is built into Parcel and create-react-app out of the box.
If you're using React Spectrum with raw webpack, then you'll need to configure [css-loader](https://webpack.js.org/loaders/css-loader/).

If your application is written in TypeScript, be sure to add [@types/react](https://www.npmjs.com/package/@types/react) and [@types/react-dom](https://www.npmjs.com/package/@types/react-dom) to your project's dependencies as per React's [type checking guide](https://reactjs.org/docs/static-type-checking.html#type-definitions). React Spectrum components are published with their type definitions, so you can take advantage of static type checking, IDE autocomplete, and other TypeScript features.

## Setting up your app

All React Spectrum applications start with a [Provider](Provider.html). The `Provider` specifies the theme to use,
along with application level settings like the locale. Inside the `Provider`, you should render your application,
including all React Spectrum components.

```tsx example
import {Provider} from '@react-spectrum/provider';
import {theme} from '@react-spectrum/theme-default';
import {Button} from '@react-spectrum/button';

function App() {
  return (
    <Provider theme={theme}>
      <Button
        variant="accent"
        onPress={() => alert('Hey there!')}>
        Hello React Spectrum!
      </Button>
    </Provider>
  );
}
```

See the [Provider](Provider.html) and [Button](Button.html) docs for more information about the components used in this example.

## Next steps

Now that you've set up your app, you can read the documentation for the individual components to understand them in detail.
We also have high level documentation about topics like [theming](theming.html), [custom styling](styling.html),
[layout](layout.html), and [testing](testing.html).
